<template>
  <view>
    <!-- 搜索框 -->
    <van-search
      shape="square"
      background="#ff2d4a"
      placeholder="请输入搜索关键词"
    />
    <!-- 页面的tab栏 -->
    <van-tabs :active="active">
      <van-tab title="综合">
        <scroll-view
          scroll-y
          class="goods_scroll"
          @scrolltolower="scrolltolower"
          refresher-enabled
          :refresher-triggered='triggered'
          @refresherrefresh='refresherrefresh'
        >
          <van-card
            desc-class="desc-class"
            v-for="(item, index) in goods"
            :key="index"
            :price="item.goods_price"
            :desc="item.goods_name"
            :thumb="
              item.goods_small_logo || 'https://img.yzcdn.cn/vant/ipad.jpeg'
            "
          />
        </scroll-view>
      </van-tab>
      <van-tab title="销量">内容 2</van-tab>
      <van-tab title="价格">内容 3</van-tab>
    </van-tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      // 当前选中的tab栏
      active: 0,
      // 请求需要使用的参数
      params: {
        // 分类id
        cid: null,
        // 页码
        pagenum: 1,
        // 页容量
        pagesize: 10,
      },
      // 接收商品的数据
      goods: [],
      // 记录请求数据的页数
      totalPage: null,
      // 这个变量是控制是否请求回来了数据
      isLoading: false,
      // 下拉状态是否被触发
      triggered:true
    };
  },
  onLoad(options) {
    //接收传递过来的id
    this.params.cid = options.id || 5;

    this.getInit();
  },
  methods: {
    //初始化数据
    async getInit() {
      const res = await this.get({ url: "/goods/search", data: this.params });
      this.goods = [...this.goods, ...res.goods];
      this.totalPage = Math.ceil(res.total / this.params.pagesize);
    },
    // 下拉刷新
   async refresherrefresh(){
      // 当下拉刷新的时候需要将获取的数据数组重置
      this.goods=[]
      // 开启下拉刷新
      this.triggered=true
      //重新获取数据
      await this.getInit()
      //关闭状态
      this.triggered=false
    },
    // 上拉加载
    async scrolltolower() {
      //判断是否还有数据
      if (this.params.pagenum > this.totalPage) {
        uni.showToast({
          title: '已经没有数据了',
          icon: 'none',
        });
        return;
      }
      //判断上一次请求回来的数据是否请求回来了
      if (this.isLoading) {
        return;
      }
      //给当前加上状态
      this.isLoading = true;
      //首先页数要加一
      this.params.pagenum++;
      // 更新数据
      await this.getInit();
      //修改isLoading的状态  表示已经请求回来数据了
      this.isLoading = false;
    },
  },
};
</script>

<style lang="less">
.goods_scroll {
  height: calc(100vh - 98px);
}
.desc-class {
  display: -webkit-box;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
